<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8">
	<title>Dojo MVC Node Widget Test</title>

	<style type="text/css">
		@import "../../../dijit/themes/claro/document.css";
		@import "../../../dijit/tests/css/dijitTests.css";

		.bgRed {
			background-color: red;
		}

		.bgGreen {
			background-color: green;
		}

		.bgBlue {
			background-color: blue;
		}

		.boldText {
			font-weight: Bold;
		}
	</style>

	<!-- required: a default dijit theme: -->
	<link id="themeStyles" rel="stylesheet" href="../../../dijit/themes/claro/claro.css"/>

	<script type="text/javascript">
		require = {
			isDebug: 1,
			async: 1,
			mvc: {debugBindings: 1}
		};
	</script>

	<!-- required: dojo.js -->
	<script type="text/javascript" src="../../../dojo/dojo.js"></script>

	<script type="text/javascript">
		require([
			"dojox",
			"dojo/Stateful",
			"dojo/parser",
			"dojox/mvc/parserExtension",
			"dojo/domReady!"
		], function(dojox, Stateful, parser){

			titleModel = new Stateful({value: "Foo"});
			colorModel = new Stateful({value: "bgRed"});
			boldTextModel = new Stateful({checked: false});
			parser.parse();
		});
	</script>
</head>
<body class="claro">
		<script type="dojo/require">at: "dojox/mvc/at"</script>
	<div>
		<div>
			Text:
			<span data-mvc-bindings="class: at(boldTextModel, 'checked').direction(at.from).transform({format: function(value){ return value ? 'boldText' : ''; }}),
			                         innerText: at(titleModel, 'value')"></span>
		</div>
		<div>
			Choose text from:
			<select type="combo" data-mvc-bindings="value: at(titleModel, 'value')">
				<option value="Foo">Foo</option>
				<option value="Bar">Bar</option>
			</select>
		</div>
	</div>

	<div style="margin-top:8px;">
		<div style="width:200px;height:200px;" data-mvc-bindings="class: at(colorModel, 'value')"></div>
		<div>
			Choose color from:
			<select type="combo" data-mvc-bindings="value: at(colorModel, 'value')">
				<option value="bgRed">Red</option>
				<option value="bgGreen">Green</option>
				<option value="bgBlue">Blue</option>
			</select>
		</div>
	</div>

	<div style="margin-top:8px;">
		The text should be bold:
		<input type="checkbox" data-mvc-bindings="checked: at(boldTextModel, 'checked')">
	</div>
  </body>
</html>
